import React from 'react'
import uuid from 'uuid'
import PropTypes from 'prop-types'

import * as FormUtil from '../../../public/js/formUtil'
import * as StringUtils from '../../../public/js/stringUtils'
import * as AlertUtil from '../../../public/js/alertUtil'
import Form from '../../../share/Form'

class MenuEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formId: uuid.v4()
        }
    }

    save() {
        let url = domainName + '/menus', data = $('#' + this.state.formId).serializeObject(),
            methodName = 'POST'
        
        if(this.props.operator == 'edit') {
            methodName = "PUT"
        }
        FormUtil.submit(url, data, (response)=>{
            AlertUtil.alert('提示',"保存成功!",()=>{
                this.props.callback()
            })
            
        },(error) => {
            AlertUtil.alert('提示',"保存失败,请联系管理员!")
        }, methodName)
    }

    cancel() {
        $('#' + this.state.formId)[0].reset()
    }

    componentWillReceiveProps(nextProps) {
        let id = nextProps.id, form = $('#' + this.state.formId)
        if(nextProps.operator == 'edit') {
            if(StringUtils.isNotEmpty(id)) {
                FormUtil.getData(domainName +"/menus/" + id, {}, (data) => {
                    FormUtil.loadJsonDataToForm(form, data)
                }) 
            }
        } else if(nextProps.operator == 'add') {
            form[0].reset()
            if(StringUtils.isNotEmpty(nextProps.parentId)) {
                FormUtil.setFieldData('parentId', form, nextProps.parentId)
                FormUtil.setFieldData('id', form, '')
            }
        } else if(nextProps.operator == 'reset') {
            form[0].reset()
        }
    }

    render() {
        return (
            <Form saveHandle = {this.save.bind(this)} cancelHandle = {this.cancel.bind(this)} formId = {this.state.formId}>
               <div className="form-group row">
                    <input type = "hidden" name="id"/>
                    <input type = "hidden" name="parentId"/>
                    <label className="col-sm-2 text-right control-label col-form-label">名称</label>
                    <div className="col-sm-10">
                        <input type="text" name="name" className="form-control" placeholder="名称" required maxLength="30"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">样式</label>
                    <div className="col-sm-10">
                        <input type="text" name="css" className="form-control" placeholder="名称" required maxLength="30"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">链接</label>
                    <div className="col-sm-10">
                        <input type="text" name="url" className="form-control" placeholder="链接" required maxLength="1024"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">排序</label>
                    <div className="col-sm-10">
                        <input type="number" name="sort" className="form-control" placeholder="排序" required defaultValue = {100}/>
                    </div>
                </div>
            </Form>
        )
    }
}

MenuEdit.propTypes = {
    id: PropTypes.number,
    operator: PropTypes.string,
    parentId: PropTypes.number,
    callback: PropTypes.func.isRequired
}

export default MenuEdit